<template>

  <el-dialog
    :title="t('Detail')"
    :visible.sync="visible"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    width="50%"
  >
    <el-form
      ref="form"
      v-loading="loading"
      label-position="top"
      :model="auditLog"
    >
      <el-tabs v-loading="loading" value="first">
        <el-tab-pane label="整体" name="first">
          <el-row>
            <el-col :span="4">
              <el-form-item label="Http状态码" prop="httpStatusCode" />
            </el-col>
            <el-col :span="20">
              <el-input v-model="auditLog.httpStatusCode" type="danger" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item label="Http方法" prop="httpMethod" />
            </el-col>
            <el-col :span="20">
              <el-input v-model="auditLog.httpMethod" type="danger" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item label="Url" prop="url" />
            </el-col>
            <el-col :span="20">
              <el-input v-model="auditLog.url" type="danger" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item label="客户端IP地址" prop="clientIpAddress" />
            </el-col>
            <el-col :span="20">
              <el-input v-model="auditLog.clientIpAddress" type="danger" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item label="客户端名称" prop="clientName" />
            </el-col>
            <el-col :span="20">
              <el-input v-model="auditLog.clientName" type="danger" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item label="异常" prop="exceptions" />
            </el-col>
            <el-col :span="20">
              <el-input v-model="auditLog.exceptions" type="danger" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item label="用户名" prop="userName" />
            </el-col>
            <el-col :span="20">
              <el-input v-model="auditLog.userName" type="danger" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item label="时间" prop="executionTime" />
            </el-col>
            <el-col :span="20">
              <el-input v-model="auditLog.executionTime" type="danger" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item label="持续时间" prop="executionDuration" />
            </el-col>
            <el-col :span="20">
              <el-input v-model="auditLog.executionDuration" type="danger" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item label="浏览器信息" prop="browserInfo" />
            </el-col>
            <el-col :span="20">
              <el-input v-model="auditLog.browserInfo" type="danger" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item label="应用名称" prop="applicationName" />
            </el-col>
            <el-col :span="20">
              <el-input v-model="auditLog.applicationName" type="danger" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item :label="t('CorrelationId')" prop="correlationId" />
            </el-col>
            <el-col :span="20">
              <el-input v-model="auditLog.correlationId" type="danger" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item :label="t('Comments')" prop="comments" />
            </el-col>
            <el-col :span="20">
              <el-input v-model="auditLog.comments" type="danger" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item :label="t('ExtraProperties')" prop="extraPropertiesAsString" />
            </el-col>
            <el-col :span="20">
              <el-input v-model="auditLog.extraPropertiesAsString" type="danger" />
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="操作" name="second">
          <el-collapse v-for="item in auditLog.actions" :key="item.id">
            <el-collapse-item :title="item.methodName">
              <el-row>
                <el-col :span="4">
                  <div>参与时间</div>
                </el-col>
                <el-col :span="20">
                  <div>{{ item.executionDuration }}</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <div>参数</div>
                </el-col>
                <el-col :span="20">
                  <div>{{ item.parameters }}</div>
                </el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </el-dialog>
</template>

<script>
import { getById } from '@/api/administration/auditLog/auditLog'

export default {
  name: 'Detail',
  props: {
    context: {
      type: Object,
      required: true
    },
    visible: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      // auditLog: null
      auditLog: {
        applicationName: '',
        browserInfo: '',
        clientId: '',
        clientIpAddress: '',
        clientName: '',
        comments: '',
        concurrencyStamp: '',
        correlationId: '',
        exceptions: '',
        executionDuration: '',
        executionTime: '',
        extraProperties: null,
        extraPropertiesAsString: '',
        httpMethod: '',
        httpStatusCode: '',
        id: '',
        impersonatorTenantId: '',
        impersonatorUserId: '',
        tenantId: '',
        tenantName: '',
        url: '',
        userId: '',
        userName: '',
        actions: [],
        entityChanges: []
      }
    }
  },
  watch: {
    context(newVal, oldVal) {
      this.loading = true
      this.$nextTick(() => {
        getById(newVal.id).then(resp => {
          this.auditLog = resp.data
          this.auditLog.extraPropertiesAsString = JSON.stringify(this.auditLog.extraProperties)
        }).finally(() => {
          this.loading = false
        })
      })
    }
  },
  methods: {
    closeDialog() {
      this.resetDialog() // 重置表单
      this.$emit('update:visible', false)
    },
    resetDialog() {
      this.$refs.form.resetFields()
    },
    t() {
      return this.$abp.localization.getResource('AbpAuditLogging')(...arguments)
    }
  }
}
</script>
<style lang="scss" scoped>
.audit-log-container {
  .logInfo {
    border-collapse: collapse;
    border-spacing: 2px;

    tr {
      border: 1px solid #f0f0f0;

      th {
        background-color: #fafafa;

        width: 120px;

      }

      th, td {
        text-align: left;
        text-overflow: ellipsis;
        vertical-align: middle;
        box-sizing: border-box;
        border-right: #f0f0f0;
        height: inherit;
        padding: 8px 16px;
      }
    }
  }
}
</style>
